<template>
  <div style="border-top: 1px solid #333; margin: 20px 0;"></div>
  <div class="contain">
 <div class="vertical-container">
  <div class="avatar-container">
  <div class="avatar"><el-avatar :size="80"  src="/src/image/医生肖像头像.png" @click="handleClick" ></el-avatar></div>
</div>
  <el-col :span="12">
   
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      >
      <el-menu-item index="1" @click="select_people" v-if="sys==2">
        <i class="el-icon-menu"></i>
        <img :src="activeIndex === '1' ? activepeopleIcon : peopleIcon" class="menu-icon" />
        <span slot="title">挂号预约</span>
      </el-menu-item>
      <el-menu-item index="1" @click="select_people" v-else>
        <i class="el-icon-menu"></i>
        <img :src="activeIndex === '1' ? activepeopleIcon : peopleIcon" class="menu-icon" />
        <span slot="title"> 我的预约</span>
      </el-menu-item>

      <el-menu-item index="2" @click="select_medicine" v-if="sys==2">
        <i class="el-icon-menu"></i>
        <img :src="activeIndex === '2' ? activemedIcon : medicineIcon" class="menu-icon" />
        <span slot="title">排队等待</span>
      </el-menu-item>
      <el-menu-item index="2" @click="select_medicine" v-else>
        <i class="el-icon-menu"></i>
        <img :src="activeIndex === '2' ? activemedIcon : medicineIcon" class="menu-icon" />
        <span slot="title">病历编辑</span>
      </el-menu-item>

      <el-menu-item index="3" @click="select_project" v-if="sys==2">
        <i class="el-icon-document"></i>
        <img :src="activeIndex === '3' ? activeprojectIcon : projectIcon" class="menu-icon" />
        <span slot="title">我的预约</span>
      </el-menu-item>
      <el-menu-item index="3" @click="select_project" v-else>
        <i class="el-icon-document"></i>
        <img :src="activeIndex === '3' ? activeprojectIcon : projectIcon" class="menu-icon" />
        <span slot="title">检验申请</span>
      </el-menu-item>

      <el-menu-item index="4" @click="select_myapp">
        <i class="el-icon-menu"></i>
        <img :src="activeIndex === '4' ? activemedIcon : medicineIcon" class="menu-icon" />
        <span slot="title">支付记录</span>
      </el-menu-item>
      <el-menu-item index="5" @click="select_mymed" v-if="sys==2">
        <i class="el-icon-menu"></i>
        <img :src="activeIndex === '5' ? activemedIcon : medicineIcon" class="menu-icon" />
        <span slot="title">我的病历</span>
      </el-menu-item>
    </el-menu>
  </el-col>
 </div>
<div>
  <el-dialog
        v-model="dialogVisible"
        :title="isEditing ? '信息修改' : '新增信息'"
        width="600px"
      >
        <el-form label-width="80px" >
          <el-form-item label="姓名">
            <el-input   v-model="use.name"></el-input>
          </el-form-item>     
          <el-form-item label="医生科室">
              <el-input v-model="use.specialty" ></el-input>
          </el-form-item>
          <el-form-item label="医生房间:">
            <el-input v-model="use.roomNumber" ></el-input>
          </el-form-item>
          <el-form-item label="电子邮件">
            <el-input   v-model="use.email"></el-input>
          </el-form-item>       
          <el-form-item label="新密码">
            <el-input   v-model="use.password" type="password"></el-input>
          </el-form-item>     
          
          <el-button type="primary" @click="juni1()" style="margin-left: 85%;">提交</el-button>
          
        </el-form>
      </el-dialog>
</div>
<div class="vertical-container1">
  <RouterView/>
</div>

</div>

</template>

<script setup lang="ts">
import { ref,onMounted,reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
let token="";
let sys=ref(2);
let dialogVisible=ref(false);
let isEditing=true;
let use=reactive({
  doctorId: 0,
  name: "",
  specialty: "",
  phoneNumber: "",
  email: "",
  roomNumber: "",
  password: ""

})
onMounted(() => {

  const wei1 = localStorage.getItem('sys');
  console.log(JSON.stringify(wei1))
  sys.value = parseInt(wei1 ?? "0");  
  console.log("1");
  console.log(sys.value)
  console.log("1");
  const wei = localStorage.getItem('username1');
  console.log(JSON.stringify(wei));
  token=JSON.stringify(wei);
  axios.get('http://zhsj.autumnclouds.cn/doctor', {
  headers: {
    'Authorization': `Bearer ${token}`,
  },
}).then(response => {
  console.log('获取数据成功', response.data);
}).catch(error => {
  console.error('请求失败', error);
});


});
const peopleIcon = "/src/image/员工管理 0.png";
const medicineIcon = "/src/image/药物管理0.png";
const projectIcon = "/src/image/项目管理0.png";

const activepeopleIcon = "/src/image/员工管理1.png";
const activemedIcon = "/src/image/药物管理 1.png";
const activeprojectIcon = "/src/image/项目管理1.png";

const activeIndex = ref('1');
const router=useRouter();
router.push("/manager/staff");
const select_people = ()=>{
  activeIndex.value='1';
  if(sys.value==2)
  router.push("/manager/staff");
else router.push("/manager/doc");
}
const select_medicine = ()=>{
  activeIndex.value='2';
  console.log(sys.value);
  if(sys.value==2)
  router.push("/manager/medicine");
else {
  router.push("/manager/med");
  console.log("nmd");
}
}
const select_project = ()=>{
  activeIndex.value='3';
  if(sys.value==2)
  router.push("/manager/project");
else router.push("/manager/project");
}
const select_myapp = ()=>{
  activeIndex.value='4';
  if(sys.value==2)
  router.push("/manager/myapp");
else router.push("/manager/myapp");
}
const select_mymed = ()=>{
  activeIndex.value='5';
  router.push("/manager/mymed");
}
const handleClick = () => {

  // alert('头像被点击了！'); // 这里的点击效果可以根据需求修改
  dialogVisible.value=true;
};
const juni1 = () => {
  const wei = localStorage.getItem('username2');
  let paymentId: number = parseInt(wei ?? "0");  
  let usr={
    doctorId: 0,
    name: "",
    specialty: "",
    phoneNumber: "",
    email: "",
    roomNumber: "",
    password: ""
  }
  axios.get(`http://zhsj.autumnclouds.cn/doctor/${paymentId}`)
  .then(response => {
    console.log('医生信息:', response.data.data);
    usr.doctorId=paymentId;
    usr.name=response.data.data.name;
    usr.specialty=response.data.data.specialty;
    usr.phoneNumber=response.data.data.phoneNumber;
    usr.email=response.data.data.email;
    usr.roomNumber=response.data.data.roomNumber;
    usr.password=response.data.data.password;
    
    console.log(use);
    if(use.name!=""){
      usr.name=use.name;
    }
    if(use.specialty!=""){
      usr.specialty=use.specialty;
    }
    if(use.roomNumber!=""){
      usr.roomNumber=use.roomNumber;
    }
    if(use.email!=""){
      usr.email=use.email;
    }
    if(use.password!=""){
      usr.password=use.password;
    }
    console.log(usr);
    const result = confirm("你确定要修改吗?");
    if (result) {
      axios.put("http://zhsj.autumnclouds.cn/doctor", usr)
            .then((response) => {
              console.log(response.data);
              alert("修改成功!");
            })
            .catch((error) => {
              alert("修改失败!");
            });

    }else{

    }

  })
  .catch(error => {
    console.error('获取医生信息失败:', error);
  });
// alert('头像被点击了！'); // 这里的点击效果可以根据需求修改
console.log(use);
dialogVisible.value=false;
};
</script>
<style scoped>
.contain{
  height: 800px;
  width: 100%;
  display: flex;   
}
.vertical-container {
  display: flex;          /* 使容器成为 Flexbox 布局 */
  flex-direction: column; /* 让子元素垂直排列 */
  justify-content: flex-start; /* 子元素从容器顶部开始排列 */
  align-items: left;    /* 让子元素在水平方向居中对齐 */
  height: 800px;          /* 使用100%的视窗高度，确保容器覆盖整个屏幕 */
  width: 199px;
  
}
.vertical-container1 {
  display: flex;          /* 使容器成为 Flexbox 布局 */
  flex-direction: column; /* 让子元素垂直排列 */
  justify-content: flex-start; /* 子元素从容器顶部开始排列 */
  align-items: left;    /* 让子元素在水平方向居中对齐 */
  height: 800px;          /* 使用100%的视窗高度，确保容器覆盖整个屏幕 */
  width: 100%;
  
}
.el-menu-vertical-demo {
  width: 200px; /* 设置整个菜单的宽度 */
height: 700px; 
}
.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 199px;

  background-color: #545c64;
}
.item{
  align-items: center;
}
.avatar {
  margin-bottom: 10px;
  margin-top: 10px;


}
.avatar:hover {
  transform: translateY(-10px); /* 头像上移，模拟立体效果 */

}
.menu-icon {
  width: 30px; /* 设置图标的宽度 */
  height: 30px; /* 设置图标的高度 */
  margin-right: 10px; /* 图标和文字之间的间距 */
}
</style>